<script setup>
import {inject} from "vue";


const category = inject("category")


</script>

<template>
  <div class="selector">
    <div class="Frontend" :class="category == 1 ? 'active' : '' " @click="category = 1">
      前端工程方向
    </div>
    <div class="IDCmaintain" :class="category == 2 ? 'active' : '' " @click="category = 2">
      IDC运维方向
    </div>
    <div class="Marketing" :class="category == 3 ? 'active' : '' " @click="category = 3">
      市场策划方向
    </div>
  </div>
</template>

<style scoped>
.selector {
  margin: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}

.selector > * {
  margin: 10px 25px;
  width: 200px;
  height: 60px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  align-content: center;
  border: 3px solid #333333;
  border-radius: 20px;
  transition-duration: 100ms;
}

.selector > *:hover {
  font-weight: bold;
  color: #e6e6e6;
  background-color: #00bd7e;
  border: 8px solid #333333;
  transition-duration: 100ms;

}

.selector > *:active {
  font-weight: bold;
  color: #e6e6e6;
  background-color: #00855c;
  border: 5px solid #333333;
}

.active {
  font-weight: bold;
  color: #e6e6e6;
  background-color: #00bd7e;
  border: 8px solid #333333;

}
</style>